<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1992971_c1dhs6uqoej.css">
    <style>
        *{
            margin:0;
            padding:0;
        }
        html{
            font-size: 14px;
        }
        html,body{
            height: 100%;
        }
        ul,li{
            list-style: none;
        }
        i{
            font-style: normal;
        }
        b{
            font-weight: normal;
        }
        a{
            text-decoration: none;
            color: #000;
        }

        #log{
            width: 100%;
            height: 100%;
            background-color: #eee;
            position: relative;
        }
        /* 居中内容 */
        .log-con{
            width: 1000px;
            height: 515px;
            border: 1px solid #d6d6d6;
            border-radius: 4px;
            background: #fff;
            overflow: hidden;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        /* 登录注册tab选项卡 */
        .log_nav{
            width: 100%;
            height: 83px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .log_nav li{
            width: 50%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            color: #666;
            background-color: #f3f4f5;
            border-top: 5px solid transparent;
            transform: scale();
        }
        .log_nav .active{
            background-color: #fff;
            border-top: 5px solid #25bb9b;
            border-bottom: 1px solid #eee;
            color: #25bb9b;
        }
        .log_nav li .iconfont{
            font-size: 32px;
            margin-right: 15px;
        }
        /* 登录注册信息 */
        .log_wrap{
            width:818px;
            height: 287px;
            padding: 60px 70px 80px 70px;
            margin: 0 20px;
        }
        .log_wrap .show{
            display: block;
        }
        /* 登录,注册 */
        .register,.enroll{
            width: 100%;
            height: 100%;
            display: none;
        }
        .hint{
            color: #25bb9b;
            font-size: 12px;
            text-align: right;
        }
        /* 左边 */
        .register_l,.enroll_l{
            float: left;
            width: 370px;
            height: 100%;
            margin-right: 60px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: flex-end;
        }
        .register_l input,.enroll_l input{
            border: 1px solid #ddd;
            color: #34495e;
            font-family: Lato,sans-serif;
            font-size: 14px;
            padding: 8px 5px 7px;
            width: 248px;
            height: 22px;
            border-radius: 3px;
            outline: 0;
            margin-left: 5px;
        }
        /* 密码 */
        .register_l .pass{
           position: relative;
       }
        .register_l .pass .icon-kaiguanguan-copy{
            color: #67cab2;
       }
       .register_l .pass .iconfont{
           position: absolute;
           right: 5px;
           top: 50%;
           transform: translateY(-50%);
       }
       /* 记住密码 */
       .register_l .rememberPass{
           width: 260px;
           display: flex;
           justify-content: space-between;
       }
        #autoLog{
           width: 13px;
           height: 13px;
           margin: 0;
           transform: translateY(3px);
       }
       .rememberPass i{
            font-size: 12px;
       }
       .rememberPass a{
        float: right;
        color: #67cab2;
        font-size: 14px;
       }
       /* 按钮 */
       .registerBtn,.enrollBtn{
            display: inline-block;
            width: 260px;
            height: 39px;
            line-height: 39px;
            text-align: center;
            background-color: #25bb9b;
            border-radius: 3px;
            color: #fff;
            cursor: pointer;
       }
        /* 右边 */
        .register_r,.enroll_r{
            float: left;
            width: 268px;
            height: 220px;
            padding-left: 60px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            border-left: 1px solid #eee;
        }
        .or{
            position: absolute;
            left: 0;
            top: 50%;
            color: #666;
            transform: translate(-50%,-50%);
            display: block;
            width: 16px;
            height: 25px;
            line-height: 25px;
            background-color: #fff;
        }
        .register_r li,.enroll_r li{
            margin-bottom: 20px;
            border: 1px solid #d4d4d4;
            border-radius: 6px;
            line-height: 38px;
            height: 38px;
            font-size: 14px;
            color: #666;
            padding-left: 10px;
            width: 207px;
        }
        .register_r li .iconfont,.enroll_r li .iconfont{
            font-size: 22px;
            margin-right: 15px;
            opacity: 0.5;
        }

    </style>
</head>
<body>
    <!-- 登录注册 -->
    <div id="log">
        <!-- 居中内容 -->
        <div class="log-con">
            <!-- 登录注册tab选项卡 -->
            <ul class="log_nav">
                <li class="tab_register active">
                    <span class="iconfont icon-denglu1"></span>
                    <i>登录</i>
                </li>
                <li class="tab_enroll">
                    <span class="iconfont icon-icon-user-edit"></span>
                    <i>注册</i>
                </li>
            </ul>
            <!-- 登录注册信息 -->
            <div class="log_wrap">
                <!-- 登录 -->
                <div class="register show">
                    <!-- 登录左边 -->
                    <div class="register_l">
                        <!-- 用户名 -->
                        <div class="register_name">
                            <label for="userName">用户名</label>
                            <input type="text" id="userName" placeholder="请输入用户名">
                            <p  class="hint"></p>
                        </div>
                        <!-- 密码 -->
                        <div class="pass">
                            <label>密码</label>
                            <input type="password" class="passHide" placeholder="请输入密码">
                            <input style="display: none;" type="text" class="passShow" placeholder="请输入密码">
                            <p  class="hint"></p>
                            <span class="iconfont icon-kaiguanguan-copy-copy"></span>
                            <span style="display: none;" class="iconfont icon-kaiguanguan-copy"></span>
                        </div>
                        <!-- 记住密码 -->
                        <div class="rememberPass">
                            <label for="autoLog">
                                <input type="checkbox" id="autoLog">
                                <i>下次自动登录</i>
                            </label>
                            <a href="#">忘记密码？</a>
                        </div>
                        <!-- 登录按钮 -->
                        <div class="login-button">
                            <a  target="_blank" class="registerBtn">立即登录</a>
                        </div>
                    </div>
                    <!-- 登录右边 -->
                    <ul class="register_r">
                        <b class="or">或</b>
                        <li>
                            <span class="iconfont icon-qq"></span>
                            QQ账号登录
                        </li>
                        <li>
                            <span class="iconfont icon-weixin"></span>
                            微信账号登录
                        </li>
                        <li>
                            <span class="iconfont icon-jia2"></span>
                            更多第三方账号
                        </li>
                    </ul>
                </div>

                <!-- 注册 -->
                <div class="enroll ">
                    <!-- 注册左边 -->
                    <div class="enroll_l">
                        <!-- 用户名 -->
                        <div class="enroll_name">
                            <label for="enrollName">用户名</label>
                            <input type="text" id="enrollName" placeholder="请输入用户名">
                            <p class="hint">字母，数字，下划线，减号</p>
                        </div>
                        <!-- 密码 -->
                        <div class="enroll_pass">
                            <label for="enrollPassWord">密码</label>
                            <input type="passWord" id="enrollPassWord" placeholder="请输入密码">
                            <p  class="hint">大写字母，小写字母，数字，特殊字符</p>
                        </div>
                        <!-- 重输密码 -->
                        <div class="repeat_pass">
                            <label for="repeatPassWord">重输密码</label>
                            <input type="passWord" id="repeatPassWord" placeholder="请重复输入密码">
                            <p  class="hint"></p>
                        </div>
                        
                        <!-- 注册按钮 -->
                        <div class="enroll-button">
                            <a href="#" class="enrollBtn">立即注册</a>
                        </div>
                    </div>
                    <!-- 注册右边 -->
                    <ul class="enroll_r">
                        <b class="or">或</b>
                        <li>
                            <span class="iconfont icon-qq"></span>
                            QQ账号登录
                        </li>
                        <li>
                            <span class="iconfont icon-weixin"></span>
                            微信账号登录
                        </li>
                        <li>
                            <span class="iconfont icon-jia2"></span>
                            更多第三方账号
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <script src="./js/jquery.min.js"></script>
    <script>
        // 检查localStorage
        $(function(){
            if(localStorage.getItem("userName")){
                $("#userName").val(localStorage.getItem("userName"))
                $(".pass input").val(localStorage.getItem("password"))
            }
        })
        // 点击切换登录注册
        $(".tab_register").click(function(){
            $(this).addClass("active")
            $(".tab_enroll").removeClass("active")
            $(".register").addClass("show")
            $(".enroll").removeClass("show")
        })
        $(".tab_enroll").click(function(){
            $(this).addClass("active")
            $(".tab_register").removeClass("active")
            $(".enroll").addClass("show")
            $(".register").removeClass("show")
        })
        // 点击显示影藏密码
        $(".pass .iconfont").click(function(){
            $(".icon-kaiguanguan-copy-copy").toggle()
            $(".icon-kaiguanguan-copy").toggle()
            $(".passHide").toggle()
            $(".passShow").toggle()
        })
        // 密码框内容关联
        $(".passHide").keyup(function(){
            $(".passShow").val($(this).val())
        })
        $(".passShow").keyup(function(){
            $(".passHide").val($(this).val())
        })
        // 第三方账号鼠标滑过
        $("ul li .iconfont").mouseenter(function(){
            $(this).css({
                opacity:1
            })
        })
        $("ul li .iconfont").mouseleave(function(){
            $(this).css({
                opacity:0.5
            })
        })

        // 注册验证
        // 注册用户名输入
        $("#enrollName").keyup(function(){
            nameAverify(this)
        })
        // 注册密码输入
        $("#enrollPassWord").keyup(function(){
            if($(this).val()){
                if(!/^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/.test($(this).val())){
                    $(this).closest("div").find(".hint").html("密码安全度不高")
                    $(this).closest("div").find(".hint").css({color:"#ff0000"})
                }else{
                    $(this).closest("div").find(".hint").html("安全度高")
                    $(this).closest("div").find(".hint").css({color:"#00aa00"})
                }
            }else{
                $(this).closest("div").find(".hint").html("密码不能为空")
                $(this).closest("div").find(".hint").css({color:"#ff0000"})
            }
        })
        // 注册重输密码
        $("#repeatPassWord").keyup(function(){
            if($(this).val()){
                if($(this).val() !== $("#enrollPassWord").val() ){
                    $(this).closest("div").find(".hint").html("密码不一致")
                    $(this).closest("div").find(".hint").css({color:"#ff0000"})
                }else{
                    $(this).closest("div").find(".hint").html("密码一致")
                    $(this).closest("div").find(".hint").css({color:"#00aa00"})
                }
            }else{
                $(this).closest("div").find(".hint").html("重输密码不能为空")
                $(this).closest("div").find(".hint").css({color:"#ff0000"})
            }
        })

        // 登录验证
        // 登录用户名验证
        $("#userName").keyup(function(){
            nameAverify(this)
        })
        // 登录密码验证不为空
        $(".pass input").blur(function(){
            if(!$(this).val()){
                $(this).closest("div").find(".hint").html("密码不能为空")
                $(this).closest("div").find(".hint").css({color:"#ff0000"})
            }
            else{
                $(this).closest("div").find(".hint").html("")
            }
        })

        // 用户名验证
        function nameAverify(element){
            let _this = element
            if($(_this).val()){
                if(!/^[a-zA-Z0-9_-]{4,16}$/.test($(_this).val())){
                    $(_this).closest("div").find(".hint").html("用户名输入有误")
                    $(_this).closest("div").find(".hint").css({color:"#ff0000"})
                }else{
                    $(_this).closest("div").find(".hint").html("用户名合法")
                    $(_this).closest("div").find(".hint").css({color:"#00aa00"})
                }
            }else{
                $(_this).closest("div").find(".hint").html("用户名不能为空")
                    $(_this).closest("div").find(".hint").css({color:"#ff0000"})
            }
        }

        //注册按钮
        $(".enrollBtn").click(function(){
            if($("#repeatPassWord").closest("div").find(".hint").html() === "密码一致" && $("#enrollName").closest("div").find(".hint").html() === "用户名合法"){
                $.ajax({
                    url:"http://127.0.0.1:84/enrollUser",
                    data:{
                        userName:$("#enrollName").val(),
                        password:$("#repeatPassWord").val()
                    },
                    success(data){
                        alert(data)
                        window.location.reload()
                    }
                })
            }
        })
        //登录按钮
        $(".registerBtn").click(function(){
            // ($("#userName").val() === localStorage.getItem("userName") && $(".pass input").val() === localStorage.getItem("password"))
            if($(".pass input").closest("div").find(".hint").html() === "" && $("#userName").closest("div").find(".hint").html() === "用户名合法" && $(".pass input").val() !== ""){
                $.ajax({
                    url:"http://127.0.0.1:84/userRegister",
                    data:{
                        userName:$("#userName").val(),
                        password:$(".pass input").val()
                    },
                    success(data){
                        // alert(data)
                        if(data === `${$("#userName").val()}登录成功`){
                            // 记住密码
                            if($("#autoLog")[0].checked){
                                localStorage.setItem("userName",$("#userName").val())
                                localStorage.setItem("password",$(".pass input").val())
                            }
                            window.location.href = `http://127.0.0.1:84/home.html?name=${$("#userName").val()}`
                        }
                        else{
                            alert(data)
                        }
                    }
                })
            }else{
                alert("请检查用户名或密码输入")
            }
        })
        // 回车登录
        $(".pass input").keyup(function(event){
            if(event.keyCode === 13){
                $(".registerBtn").click()
            }
        })
    </script>
</body>
</html>